<template>
  <PageTabelLayout>
    <template #pageHeader>
      <div class="my-header" style="padding: 10px;" v-if="headerShow">
        <div style="display: flex;margin-bottom: 20px;align-items: center;font-weight:600;">
          <a-form-item label="流转卡/工序/员工扫描">
            <a-input-search class="bacClass" style="width:420px" allow-clear @press-enter="setChangeCode"
              @search="setChangeCode" />
          </a-form-item>
        </div>
        <a-form size="small" :model="searchData" auto-label-width layout="inline">
          <a-form-item label-col-flex="80px" label="车间">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="当班日期">
            <a-date-picker  popup-container="html"  class="bacClass" style="width:200px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="班次">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="班组">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="等待工序">
            <a-input class="bacClass" style="width:200px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="区域/车号">
            <a-input class="bacClass" style="width:194px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="门幅">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="克重">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="流转卡号">
            <a-input class="bacClass" style="width:200px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="重量">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="计划单号">
            <a-input class="bacClass" style="width:200px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="布号">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="品名">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="色称">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="色号">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="匹数">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="设备编号">
            <a-input class="bacClass" style="width:200px" allow-clear />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="机号">
            <a-input class="bacClass" style="width:228px" allow-clear />
          </a-form-item>
          <a-checkbox> 机动 </a-checkbox>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar" style="padding-bottom: 10px;">
        <Toolbar :items="['查询', '清空']" @select="selectHandler" @clearAll="clearAllHandler" />
      </div>
    </template>
    <template #pageTabel>
      <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
          @grid-ready="gridReady" style="height: 100%;" class='ag-theme-alpine' :defaultColDef="defaultColDef"
          :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData" @columnResized="onColumnResized"
          @columnMoved="onColumnMoved"></AgGridVuesCopys>
      </a-spin>
    </template>
    <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
      @change="changePage" @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
      :page-size="pagination.pageSize" :current="pagination.page" />

    <a-drawer :drawer-style="{ zIndex: 9999 }" :mask-closable="false" :width="400" :visible="pageData.showEdit"
      unmountOnClose @ok="sideOk" @cancel="pageData.showEdit = false" cancel-text="关闭" ok-text="保存">
      <template #title>
        记录部分产量(修改产量)
      </template>
      <div>
        <a-form ref="formRef" auto-label-width :model="dataForm">
          <a-form-item label-col-flex="80px" label="匹数" field="requireMinNum" :validate-trigger="['change', 'blur']"
            :rules="[{ required: true, message: '匹数必填' }]">
            <a-input class="bacClass" style="width:200px" />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="重量" field="requireMaxNum" :validate-trigger="['change', 'blur']"
            :rules="[{ required: true, message: '重量必填' }]">
            <a-input class="bacClass" style="width:200px" />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="米数" field="extandField" :validate-trigger="['change', 'blur']"
            :rules="[{ required: true, message: '米数必填' }]">
            <a-input class="bacClass" style="width:200px" />
          </a-form-item>
          <a-form-item label-col-flex="80px" label="备注" field="remark">
            <a-input class="bacClass" style="width:200px" />
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>

  </PageTabelLayout>
</template>

<script  lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { ref, reactive, onMounted } from 'vue';

import { localeText } from '@/api/aggridZw'
import emitter from '@/hooks/useEventBus'
import { usePagination, useTable } from '@/hooks/table';
import { Message } from '@arco-design/web-vue';
import { processScan } from '@/api/DyeingshopManagement/workshopProcessScan';
import { pagingList } from "@/api/paging";
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

export default {
  name: "farmScan",
  setup() {
    let headerShow = ref<boolean>(true);
    const processScanApi = processScan();
    let changHeadShow = (boolVal: boolean) => {
      headerShow.value = boolVal;
      emitter.emit('window-change');
    };
    let selectHandler = () => {
      pagination.page = 1;
      doRefresh()
    };
    let clearAllHandler = () => { };
    emitter.on("refresh-farmScan", () => {
      selectHandler()
      // gridOption.value.sizeColumnsToFit();
    });
    const searchData = reactive<{
      unit: string;
      createTime: string;
      createTime2: string;
      section: string;
      process: string;
      flowCardCode: string;
      staffCode: string;
      staffName: string;
    }>({
      unit: '',
      createTime: '',
      createTime2: '',
      section: '',
      process: '',
      flowCardCode: '',
      staffCode: '',
      staffName: '',
    });
    const doRefresh = async () => {
      pageData.pageLoading = true;
      updateGridState01()
      await processScanApi.getProcessAdjust({
        page: pagination.page,
        limit: pagination.pageSize,
      }, {
        ...searchData
      }).then(({ data, code }: any) => {
        if (code === 200) {
          // gridOption.value.sizeColumnsToFit();
          console.log(data);
          // table.handleSuccess(data.list);
          // gridOption.value.setRowData(data.list);
          // total.value = data.total;
          // console.log(res.data);
        }
      })
        .catch(console.log)
        .finally(() => {
          pageData.pageLoading = false;
        });
    };
    const dataForm = ref({});
    const gridOption = ref();
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api;
      colState.value = params.columnApi
    };
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      // flex: 1,
      width: 150,
    };
    const cfsValue = [
      {
        headerName: '车间',
        field: 'recordDate',
      },
      {
        headerName: '工段',
        field: 'planAdd',
      },
      {
        headerName: '工序',
        field: 'planAdd',
      },
      {
        headerName: '工序备注',
        field: 'planAdd',
      },
      {
        headerName: '插入工序原因',
        field: 'planAdd',
      },
      {
        headerName: '责任部门',
        field: 'planAdd',
      },
      {
        headerName: '工序计划开始时间',
        field: 'planAdd',
      },
      {
        headerName: '工序计划结束时间',
        field: 'planAdd',
      },
      {
        headerName: '工序实际开始时间',
        field: 'planAdd',
      },
      {
        headerName: '工序实际结束时间',
        field: 'planAdd',
      },
      {
        headerName: '匹数',
        field: 'planAdd',
      },
      {
        headerName: '重量',
        field: 'planAdd',
      },
      {
        headerName: '机号',
        field: 'planAdd',
      },
      {
        headerName: '区域/车号',
        field: 'planAdd',
      },
      {
        headerName: '开始工号',
        field: 'planAdd',
      },
      {
        headerName: '结束工号',
        field: 'planAdd',
      },
      {
        headerName: '开始员工',
        field: 'planAdd',
      },
      {
        headerName: '开始班次',
        field: 'planAdd',
      },
      {
        headerName: '结束班次',
        field: 'planAdd',
      },
      {
        headerName: '区域/车号',
        field: 'planAdd',
      },

      {
        headerName: '作业性质',
        field: 'planAdd',
      },
      {
        headerName: '工序条形码',
        field: 'planAdd',
      },
      {
        headerName: '工序说明',
        field: 'planAdd',
      },
      {
        headerName: '操作',
        field: 'action',
        resizable: false,
        filter: false,
        sortable: false,
        lockPosition: 'right',
        width: '100',
        pinned: 'right',
        cellRenderer: {
          template: `<a-tag color="#30be16" @click="a" class="gesture">编辑</a-tag>`,
          setup(props: any) {
            const a = () => {
              editHandler(props.params.data)
            }
            return {
              a
            }
          }
        },
      },
    ];
    const total = ref(10);
    const changePage = (val: any) => {
      pagination.page = val
      doRefresh();
    }
    const changeSize = (val: any) => {
      pagination.pageSize = val
      doRefresh();
    }
    const pagination = usePagination(doRefresh);
    const localeTextData: any = ref(localeText);
    const table = useTable();
    const editHandler = (record: any) => {
      console.log(record);
    }
    const pageData = reactive<{
      showEdit: boolean,
      pageLoading: boolean,
    }>({
      showEdit: false,
      pageLoading: false
    });
    const sideOk = () => { };
    const setChangeCode = async (flowCardCode: any) => {
      // console.log(code);
      if (flowCardCode) {
        //  console.log(code);
        await processScanApi.getFlowProcess({ flowCardCode }).then(res => {
          if (res.code === 200) {
            console.log(res);
          }
        })
      } else {
        Message.info('无法识别内容信息')
      }
    };

    const pagingList1: any = ref(pagingList)
    const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('farmScan01', gridOption, colState, cfsValue)
    const onColumnMoved = () => {
      saveGridState01()
    }
    const onColumnResized = () => {
      saveGridState01()
    }
    return {
      saveOrUpdateGridState01,
      saveGridState01,
      updateGridState01,
      onColumnMoved,
      onColumnResized,
      colState,
      pagingList1,
      headerShow,
      changHeadShow,
      searchData,
      selectHandler,
      clearAllHandler,
      localeTextData,
      pagination,
      changeSize,
      total,
      changePage,
      gridReady,
      defaultColDef,
      cfsValue,
      table,
      pageData,
      dataForm,
      sideOk,
      setChangeCode
    }
  },
  components: { PageTabelLayout,  }
}
</script>

<style scoped>
.bacClass {
  background: #fff;
  width: 270px;
  border: 1px solid #c9cdd3;
}
</style>